<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>餐桌显示</title>

<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css"/>
	
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>

</head>
<body>  
 <div layout:fragment="content" th:remove="tag">
<!-- Table goes in the document BODY -->
<table class="hovertable" align="center" width="80%">
		<tr>
			<td colspan="7" align="center"><h3>餐桌显示</h3></td>
		</tr>
		<tr>
			<td colspan="7" >
				<form action="/showBytableStatus" method="post">
					<span>使用状态：&nbsp;&nbsp;
						<select name="tableStatus">
						    <th:if test="tableStatus =='空闲'">
							    <option value="1" selected="selected">空闲</option>
							</th:if>
							<th:if test="tableStatus =='已满位'">
								<option value="0" selected="selected">已满位</option>
							</th:if>
						</select>
						<input type="submit" value="搜索"/>
					</span>
				</form>
			</td>
		</tr>
		<tr>
			<th><input type="button" value="新增" id="addDinnertableBtn"/></th>
			<th>餐桌编号</th>
			<th>餐桌名称</th>
			<th>餐桌状态</th>
			<th>订桌时间</th>
			<th>修改</th>
			<th>删除</th>
		</tr>
		<tr th:each="dinnertable:${dinnertables}"
			onmouseover="this.style.backgroundColor='#ffff66';"
			onmouseout="this.style.backgroundColor='#d4e3e5';">
			<td> </td>
			<td th:text="${dinnertable.tableId }"></td>
			<td th:text="${dinnertable.tableName }"></td>
			<td th:text="空闲" th:if="${dinnertable.tableStatus == 1}"></td>
			<td th:text="已满位" th:if="${dinnertable.tableStatus == 0}"></td>
			<td th:text="${dinnertable.orderDate }"></td>
			<td><input type="button" value="修改" class="edit-Dinnertable-btn"/></td>								   
			<td><input type="button" value="删除"  th:onclick="'deleteDinnertable(' + ${dinnertable.tableId} + ');'" /></td>
		</tr>
	</table>
	
<!-- 添加试题  -  模态框 -->
	<div class="modal fade" id="addDinnertableModal" tabindex="-1" role="dialog"
		aria-labelledby="addTestModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="addTestModalLabel">添加餐桌</h4>
				</div>
				<div class="modal-body">
					<form id="addDinnertableForm" method="POST">
						<p>
							<label>餐桌编号:</label><input type="text" name="tableId"
								placeholder="填写餐桌编号" />
						</p>
						<p>
							<label>餐桌名称:</label><input type="text" name="tableName"
								placeholder="填写餐桌名称" />
						</p>
					    <p>
							<label>餐桌状态</label>
							   <label> <input name="tableStatus"  type="radio" value="1" checked="true" />空闲 </label>
							   <label> <input name="tableStatus"  type="radio" value="0" />已满位 </label>
						</p> 
						<p>
							<label>订桌时间:</label><input type="text" name="orderDate"
								placeholder="填写订桌时间" />
						</p>
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" class="btn btn-primary" id="addDinnertableSaveBtn">添加</button>
				</div>
			</div>
		</div>
	</div>



	<!-- 修改科目  -  模态框 -->
	<div class="modal fade" id="editDinnertableModal" tabindex="-1" role="dialog"
		aria-labelledby="editTestModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="editTestModalLabel">修改餐桌</h4>
				</div>
				<div class="modal-body">
					<form id="editDinnertableForm" method="POST">
						<p>
							<label>餐桌编号:</label><input type="text" name="tableId"
								id="tableId"  />
						</p>
						<p>
							<label>餐桌名称:</label><input type="text" name="tableName"
								id="tableName"  />
						</p>
			 			<p>
							<label>餐桌状态</label>
								<select name="tableStatus">
									<option value="1" >空闲</option>
									<option value="0" >已满位</option>
								</select>
						</p> 
						<p>
							<label>订桌时间:</label><input type="text" name="orderDate"
								id="orderDate"  />
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="editDinnertableBtn">修改</button>
				</div>
			</div>
		</div>
	</div>


<script th:src="@{/js/dinnertable.js}" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>

<!-- 新增科目 -->
<script type="text/javascript">
/* 新增方法  */    	
$('#addDinnertableBtn').click(function() {
			$('#addDinnertableModal').modal('show');
		});
		

//保存并添加餐桌
$('#addDinnertableSaveBtn').click(function(){
	if($('#addDinnertableForm').valid()) {			
		var tableId = $('#addDinnertableForm input[name="tableId"]').val();
		var tableName = $('#addDinnertableForm input[name="tableName"]').val();
		var tableStatus = $('#addDinnertableForm input[name="tableStatus"]').val();	
		var orderDate = $('#addDinnertableForm input[name="orderDate"]').val();	
		
		var param ={
				tableId : tableId,
				tableName : tableName,
				tableStatus : tableStatus,
				orderDate : orderDate					
			}
		
		$.ajax({
			type : 'POST',
			url: '/saveDinnertable',
			contentType : "application/json",
			dataType: "json",
			
			data: JSON.stringify(param),
			success:function(data){
				if(data.success){
					alert('添加成功!');						
					window.location.reload();
				}else{
					var messageMap = data.messageMap;					
					for(var key in messageMap){
						var value = messageMap[key];
					}
					alert('添加失败');
				}
			}
		})
	}
})
		
</script>


<script type="text/javascript">
//修改餐桌
//点击修改，显示原来信息
 $('.edit-Dinnertable-btn').click(function() {
		tableId = $(this).parent().siblings().eq(1).text();
		$.ajax({ 
			type: 'POST',
			url: '/getDinnertableById',
			data: {
				tableId: tableId
			}, 
			dataType: "json",
			success: function(data) {				
				$('#editDinnertableForm input[name="tableId"]').val(data.tableId);
				$('#editDinnertableForm input[name="tableName"]').val(data.tableName);
				$('#editDinnertableForm select[name="tableStatus"]').val(data.tableStatus);
				$('#editDinnertableForm input[name="orderDate"]').val(data.orderDate);	
			}
			
		});	
		$('#editDinnertableModal').modal('show');	
	}); 
	
	//保存修改餐桌
	$("#editDinnertableBtn").click(function() {
		if($("#editDinnertableForm").valid()) {
			var tableId = $('#editDinnertableForm input[name="tableId"]').val();
			var tableName = $('#editDinnertableForm input[name="tableName"]').val();
			var tableStatus = $('#editDinnertableForm select[name="tableStatus"]').val();	
			var orderDate = $('#editDinnertableForm input[name="orderDate"]').val();
			
			var param ={
					tableId:tableId,
					tableName:tableName,
					tableStatus:tableStatus,
					orderDate:orderDate
				}		
			$.ajax({
				type : 'POST',
				url:'/editDinnertable',
				contentType : "application/json",
				dataType:"json",
				data: JSON.stringify(param),
				success:function(data){
					if(data.success){
						alert('修改成功!');						
						window.location.reload();
					}else{
						var messageMap = data.messageMap;					
						for(var key in messageMap){
							var value = messageMap[key];
						}
						alert('修改失败');
					}
				}
			})
		}
	}); 
	
</script>	

<script type="text/javascript">	
	//删除餐桌
	function deleteDinnertable(tableId) {
		if(confirm('是否删除')){
			$.ajax({
				type:"POST",
				url:"/deleteDinnertable",
				//contentType : "application/json",
				data:{
					tableId:tableId
					},
				dataType:"json",
				success:function(data){
					
					alert('删除成功');
					
					location.href = "/showAllDinnertable";
				
				}
			});				
		}
	}
</script>
</div>
</body>
</html>